<template>
	<view class="mine-content ">

		<!-- 用户头像+搜索 -->
		<view class="user-search">
			<image class="user-img" src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/user-img.png" mode="">
			</image>
			<uni-search-bar @confirm="search" @input="input" class="search-style"></uni-search-bar>
		</view>
		<!-- 直购+积分 -->
		<view class="type-choose">
			<view class="left">
				<view class="zhigou-tit" >
					<text class="text" >直购</text>
					<!-- <image class="star" src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/star.png"></image> -->
				</view>
			</view>
			
			<view class="left">
				<view class="point" >
					<text class="text" style="color: #A6A6A6;">积分</text>
					<!-- <image class="star" src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/star.png"></image> -->
				</view>
			</view>
		</view>
		<!-- 切换 -->
		<view class="lable-list">
			<view class="all">
				<text style="color: #E84A52;">综合</text>
			</view>
			
			<view class="all">
				<text>上新</text>
			</view>
			
			<view class="all">
				<text>销量</text>
			</view>
			
			<view class="all">
				<text>价格</text>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="shop-list">
			<view class="shop-goods">
				<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-goods.png" ></image>
				<text class="goods-text">Pokemon精灵宝可梦卡牌仙子伊布</text>
				<view class="goods-price">
					<text class="">¥199.99</text>
					<view class="collection">
						<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-add.png" ></image>
						<text class="">1234</text>
					</view>
				</view>
			</view>
			<view class="shop-goods">
				<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-goods.png" ></image>
				<text class="goods-text">Pokemon精灵宝可梦卡牌仙子伊布</text>
				<view class="goods-price">
					<text class="">¥199.99</text>
					<view class="collection">
						<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-add.png" ></image>
						<text class="">1234</text>
					</view>
				</view>
			</view>
			<view class="shop-goods">
				<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-goods.png" ></image>
				<text class="goods-text">Pokemon精灵宝可梦卡牌仙子伊布</text>
				<view class="goods-price">
					<text class="">¥199.99</text>
					<view class="collection">
						<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-add.png" ></image>
						<text class="">1234</text>
					</view>
				</view>
			</view>
			<view class="shop-goods">
				<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-goods.png" ></image>
				<text class="goods-text">Pokemon精灵宝可梦卡牌仙子伊布</text>
				<view class="goods-price">
					<text class="">¥199.99</text>
					<view class="collection">
						<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-add.png" ></image>
						<text class="">1234</text>
					</view>
				</view>
			</view>
			<view class="shop-goods">
				<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-goods.png" ></image>
				<text class="goods-text">Pokemon精灵宝可梦卡牌仙子伊布</text>
				<view class="goods-price">
					<text class="">¥199.99</text>
					<view class="collection">
						<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-add.png" ></image>
						<text class="">1234</text>
					</view>
				</view>
			</view>
			<view class="shop-goods">
				<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-goods.png" ></image>
				<text class="goods-text">Pokemon精灵宝可梦卡牌仙子伊布</text>
				<view class="goods-price">
					<text class="">¥199.99</text>
					<view class="collection">
						<image src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/shop-add.png" ></image>
						<text class="">1234</text>
					</view>
				</view>
			</view>
			
			
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mine-content {
		min-height: 100vh;
		background-color: rgba(233, 234, 242, 1);
	}

	.user-img {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50rpx;
		margin: 30rpx 20rpx 0rpx 34rpx;
	}

	.user-search {
		display: flex;
		width: 100%;
		background-color: #fff;
		height: 130rpx;
	}

	.search-style {
		margin-top: 20rpx;
	}

	.type-choose {
		display: flex;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
	}

	.zhigou-tit {
		width: 120rpx;
		height: 52rpx;
		border: 3rpx solid #CEBCF5;
		border-radius: 7rpx;
		text-align: center;
		margin-left: 180rpx;
		color: #8453ED;
	}
	.point{
		width: 120rpx;
		height: 52rpx;
		border: 3rpx solid #A6A6A6;
		border-radius: 7rpx;
		text-align: center;
		margin-left: 70rpx;
		color: #A6A6A6;
	}

	.left {
		/* justify-content: center; */
		display: flex;
		width: 50vw;
		height: 70rpx;
		margin: 10rpx auto;
	}

	.text {
		font-size: 32rpx;
		
		line-height: 52rpx;
		font-weight: bold;

	}

	.star {
		width: 28rpx;
		height: 28rpx;
		padding-right: 30rpx;
	}
	.lable-list{
		display: flex;
		text-align: center;
		background-color: #fff;
		color: #A6A6A6;
		font-size: 28rpx;
	}
	
	.all{
		width: 25vw;
		height: 50rpx;
		
	}
	
	.shop-list{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-bottom: 70rpx;
	}
	.shop-goods{
		width: 350rpx;
		height: 492rpx;
		background-color: #fff;
		margin: 20rpx 7rpx 5rpx 7rpx ;
		border-radius: 14rpx;
		text-align: center;
		image{
			width: 250rpx;
			height: 336rpx;
			margin: 13rpx auto;
			border-radius: 14rpx;
			
		}
		
	}
	.goods-text{
		font-size: 24rpx;
		width: 330rpx;
		margin: 10rpx auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-align: left;
		margin-left: 10rpx;
	}
	.goods-price{
		display: flex;
		font-size: 25rpx;
		color: #F0787E;
		font-weight: 600;
			margin-left: 10rpx;
	}
	.collection{
		text-align: right;
		font-size: 22rpx;
		color: #A5A6A6;
		margin: auto;
		font-weight: 400;
		width: 232rpx;
		text-align: right;
		image{
			width: 20rpx;
			height: 20rpx;
			text-align: center;
			margin: auto;
			margin-right: 10rpx;
		}
	}
	
</style>